<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画测试</title>
    <script src="https://cdn.dowebok.com/134/js/scrollReveal.js"></script>
</head>
<body>
    <style>
        * { margin: 0; padding: 0;}
        .dowebok { font-family: "Microsoft Yahei"; background-color: #202a39;}
        .dowebok h1 { margin: 80px 0 50px; font-size: 60px; font-weight: 500; color: #fff; text-align: center;}
        .dowebok h2 { margin: 10px 0; font-size: 24px; font-weight: 500; color: #616c84; text-align: center;}
        .dowebok .column-container { width: 560px; margin: 0 auto; padding-top: 150px; font-size: 0;}
        .dowebok .column { display: inline-block; width: 30px; margin: 0 20px; *display: inline; zoom: 1;}
        .dowebok .block { margin-bottom: 45px; border-radius: 3px;}
        .dowebok .block-1x { height: 180px;}
        .dowebok .block-2x { height: 240px;}
        .dowebok .block-3x { height: 300px;}
        .block-blueberry { background: #008597;}
        .block-slate { background: #2d3443;}
        .block-grape { background: #4d407c;}
        .block-raspberry { background: #ff005d;}
        .block-mango { background: #ffcc00;}
        .block-orange { background: #ff7c35;}
        .block-kiwi { background: #35ff99;}
        </style>
<!-- col 5 -->
<div class="dowebok">
    <div class="column">
        <div class="block block-3x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
        <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
    </div>
    
    <!-- col 6 -->
    <div class="column">
        <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
        <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
        <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
    </div>
    
    <!-- col 7 -->
    <div class="column">
        <div class="block block-2x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
        <div class="block block-1x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
        <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
        <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
        <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
        <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
    </div>
    
    <!-- col 8 -->
    <div class="column">
        <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
        <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
        <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
        <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
       <div class="block block-2x block-kiwi" data-scroll-reveal="wait 2.3s, then enter right and move 2240px over 1s">22</div>
    </div>
</div>
<script>

(function(){
	// 创建一个新的滚动提示对象，重置位置为50px
	window.scrollReveal = new scrollReveal({ reset: true, move: '50px'});
})();
</script>
</body>
</html>